<template>
	<view class="page">
    <view class="page-baner" :style="'background-image: url('+indexBg+');'">
      <u-navbar :fixed="false" leftIcon=" " :autoBack="false" title="首页" titleStyle ="color: #fff;" placeholder bgColor="transparent">
        <view class="nav-version" slot="left">{{ enterpriseInfo.versionType == "1" || enterpriseInfo.versionType == null ? "试用版" : "正式版"}}</view>
      </u-navbar>
      <view class="content">
        <view class="content-left">
          <view class="text">价值来自专业</view>
          <view class="text">品质源于细节</view>
          <view class="btn">安全便捷</view>
        </view>
        <image class="banner" src="https://gowork365.com/prod-api/profile/mini/index/banner1.png" mode="widthFix" />
      </view>
    </view>
    <view class="validity-info" @click="jumpTo('/other/enterpriseInfo/myEnterprise')">
      <view class="info">
        <image class="logo" :src="enterpriseInfo.logo?baseUrl + enterpriseInfo.logo:'https://gowork365.com/prod-api/profile/mini/index/enterpriseLogo.png'" />
        <view class="name u-line-1">{{ enterpriseInfo.enterpriseName }}</view>
        <view class="time">{{ formatTimeTwo(enterpriseInfo.effectiveTime, 'Y-M-D') }}到期</view>
      </view>
      <u-icon name="arrow-right" color="#d89c2d" size="24rpx"></u-icon>
    </view>
    <view class="icon-box">
      <view class="icon-title">
        <image src="https://gowork365.com/prod-api/profile/mini/index/title1.png" mode="widthFix" />
        <text>快捷功能</text>
      </view>
      <view class="icon-list">
        <view class="icon-item" @click="jumpTab('/pages/company/company')" v-if="getPermissions('/pages/company/company')">
          <image src="https://gowork365.com/prod-api/profile/mini/index/icon1.png" mode="widthFix" />
          <view class="text">公司治理</view>
        </view>
        <view class="icon-item" @click="jumpTab('/pages/staff/staff')" v-if="getPermissions('/pages/staff/staff')">
          <image src="https://gowork365.com/prod-api/profile/mini/index/icon2.png" mode="widthFix" />
          <view class="text">员工关系</view>
        </view>
        <view class="icon-item" @click="jumpTab('/pages/contract/contract')" v-if="getPermissions('/pages/contract/contract')">
          <image src="https://gowork365.com/prod-api/profile/mini/index/icon3.png" mode="widthFix" />
          <view class="text">合同管理</view>
        </view>
      </view>
    </view>
    <view class="icon-box" style="margin-top: 0;">
      <view class="icon-title">
        <image src="https://gowork365.com/prod-api/profile/mini/index/title3.png" mode="widthFix" />
        <text>签署待办</text>
      </view>
      <view class="icon-list">
        <view class="icon-item" @click="toList('/pages/company/company')" v-if="getPermissions('/pages/company/company')">
          <image src="https://gowork365.com/prod-api/profile/mini/index/icon4.png" mode="widthFix" />
          <view class="text">股东协议</view>
        </view>
        <view class="icon-item" @click="toList('/pages/staff/staff')" v-if="getPermissions('/pages/staff/staff')">
          <image src="https://gowork365.com/prod-api/profile/mini/index/icon5.png" mode="widthFix" />
          <view class="text">员工协议</view>
        </view>
        <view class="icon-item" @click="toList('/pages/contract/contract')" v-if="getPermissions('/pages/contract/contract')">
          <image src="https://gowork365.com/prod-api/profile/mini/index/icon6.png" mode="widthFix" />
          <view class="text">客户协议</view>
        </view>
      </view>
      <view class="model-list">
        <view class="model-item u-m-r-30 u-m-b-32" :style="'background-image: url('+model1+');'">
          <view class="title" style="color: #1D9DCD;">{{ statisticsData.progressContractCount }}</view>
          <view class="subtitle">进行中合同数</view>
        </view>
        <view class="model-item u-m-b-32" :style="'background-image: url('+model2+');'">
          <view class="title" style="color: #138E88;">{{ statisticsData.acceptContractCount }}</view>
          <view class="subtitle">已签署合同数</view>
        </view>
        <view class="model-item u-m-r-30 u-m-b-32" :style="'background-image: url('+model3+');'">
          <view class="title" style="color: #4F6FDC;">{{ enterpriseInfo.contractAllNum - enterpriseInfo.contractUseNum }}</view>
          <view class="subtitle">剩余合同份数</view>
        </view>
        <view class="model-item u-m-b-32" :style="'background-image: url('+model4+');'">
          <view class="title" style="color: #C47F33;">{{ enterpriseInfo.smsAllNum - enterpriseInfo.smsUseNum }}</view>
          <view class="subtitle">剩余短信数</view>
        </view>
      </view>
    </view>
    <view class="service-box">
      <view class="service-title">
        <image src="https://gowork365.com/prod-api/profile/mini/index/title2.png" mode="widthFix" />
        <text>平台服务</text>
      </view>
      <view class="service-list">
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/1'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service1.png" />
          <view class="item-content">
            <view>咨询律师</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/2'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service2.png" />
          <view class="item-content">
            <view>股权架构</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/1'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service3.png" />
          <view class="item-content">
            <view>合同审查</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/3'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service4.png" />
          <view class="item-content">
            <view>薪酬规划</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/2'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service5.png" />
          <view class="item-content">
            <view>合同定制</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/3'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service6.png" />
          <view class="item-content">
            <view>人员激励</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
      </view>
    </view>
    <customTabbar value="1" />
	</view>
</template>

<script>
import customTabbar from '../../components/customTabbar.vue'
import indexBg from '../../static/index/indexBg.png'
import { getNumData } from '@/api/index'
import { formatTimeTwo } from '@/common/util'

export default {
  components: {
    customTabbar,
  },
  data() {
    return {
      indexBg,
      formatTimeTwo,
      model1: 'https://gowork365.com/prod-api/profile/mini/index/model1.png',
      model2: 'https://gowork365.com/prod-api/profile/mini/index/model2.png',
      model3: 'https://gowork365.com/prod-api/profile/mini/index/model3.png',
      model4: 'https://gowork365.com/prod-api/profile/mini/index/model4.png',
      baseUrl: this.baseUrl,
      enterpriseInfo: {},
      statisticsData: {
        progressContractCount: 0,
        acceptContractCount: 0,
        remainingContractCount: 0,
        remainingMessageCount: 0,
      },
      permissions: [],
    }
  },
  onShow() {
    if(!uni.getStorageSync('token') || uni.getStorageSync('token') == '') {
			return
    }
    this.permissions = uni.getStorageSync('permissions') || []
    this.enterpriseInfo = uni.getStorageSync('enterpriseInfo')
    this.getDate()
  },
  methods: {
    getPermissions(path) {
      return this.permissions.findIndex(v => v == path) != -1
    },
    toList(url) {
      this.jumpTab(url);
      uni.setStorageSync('statusName', '进行中');
    },
    getDate() {
      getNumData({}).then(res => {
        if (!res) {
          uni.setStorageSync('statisticsData', this.statisticsData)
          return null;
        } else {
          this.statisticsData = res.statistics;
          this.todoData = res.todo;
          uni.setStorageSync('statisticsData', res.statistics)
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  padding-bottom: 40rpx;
  .page-baner {
    height: 690rpx;
    background-repeat: no-repeat;
    background-size: 750rpx 690rpx;
    .nav-version {
      width: 128rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      background: #138E88;
      border-radius: 28rpx;
      opacity: 0.7;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #FFFFFF;
    }
    .content {
      display: flex;
      width: 100%;
      padding-left: 56rpx;
      padding-top: 16rpx;
      margin: 10rpx auto 0;
      justify-content: space-between;
      .content-left {
        .text {
          font-family: FZZDHJW--GB1, FZZDHJW--GB1;
          font-weight: 800;
          font-size: 48rpx;
          color: #FFFFFF;
          line-height: 58rpx;
          margin-bottom: 8rpx;
        }
        .btn {
          width: 156rpx;
          height: 56rpx;
          margin-top: 18rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient( 180deg, #FDC65F 0%, #FEAD54 100%);
          border-radius: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #FFFFFF;
        }
      }
      .banner {
        width: 352rpx;
        height: auto;
      }
    }
  }
  .validity-info {
    width: 654rpx;
    height: 116rpx;
    background: #FFF3DC;
    border-radius: 16rpx;
    border: 2rpx solid #FEAD54;
    padding: 28rpx 32rpx 40rpx;
    margin: -198rpx auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .info {
      display: flex;
      align-items: center;
      .logo {
        width: 48rpx;
        height: 48rpx;
        margin-right: 8rpx;
      }
      .name {
        width: 300rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #BD8622;
        margin-right: 16rpx;
      }
      .time {
        width: 200rpx;
        flex-shrink: 0;
        font-size: 24rpx;
        color: #D89C2E;
      }
    }
  }
  .icon-box {
    margin: -28rpx auto 32rpx;
    width: 686rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
    border-radius: 16rpx;
    padding: 32rpx;
    .icon-title {
      display: flex;
      align-items: center;
      gap: 8rpx;
      margin-bottom: 32rpx;
      image {
        width: 32rpx;
        height: auto;
      }
      text {
        font-family: PingFang-SC, PingFang-SC;
        font-size: 24rpx;
        color: rgba(0,0,0,0.85);
      }
    }
    .icon-list {
      display: flex;
      justify-content: space-around;
      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
          display: block;
          width: 96rpx;
          height: auto;
          margin-bottom: 20rpx;
        }
        .text {
          font-family: PingFangSC, PingFang SC;
          font-size: 24rpx;
          color: rgba(0,0,0,0.85);
        }
      }
    }
    .model-list {
      margin-top: 48rpx;
      .model-item {
        display: inline-block;
        width: calc(50% - 16rpx);
        height: 136rpx;
        background-repeat: no-repeat;
        background-size: 100% 136rpx;
        padding: 32rpx 24rpx;
        .title {
          font-family: Roboto, Roboto;
          font-weight: bold;
          font-size: 28rpx;
          line-height: 32rpx;
          margin-bottom: 6rpx;
        }
        .subtitle {
          font-family: PingFangSC, PingFang SC;
          font-size: 24rpx;
          color: rgba(0,0,0,0.85);
          line-height: 34rpx;
        }
      }
    }
  }
  .service-box {
    margin: 0 auto;
    width: 686rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
    border-radius: 16rpx;
    padding: 32rpx;
    .service-title {
      display: flex;
      align-items: center;
      gap: 8rpx;
      margin-bottom: 32rpx;
      image {
        width: 32rpx;
        height: auto;
      }
      text {
        font-family: PingFang-SC, PingFang-SC;
        font-size: 24rpx;
        color: rgba(0,0,0,0.85);
      }
    }
    .service-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .service-item {
        width: 296rpx;
        height: 196rpx;
        position: relative;
        margin-bottom: 32rpx;
        .item-bg {
          position: absolute;
          width: 296rpx;
          height: 196rpx;
          z-index: 1;
        }
        .item-content {
          z-index: 2;
          position: absolute;
          top: 52rpx;
          left: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: rgba(0,0,0,0.85);
          .item-btn {
            margin-top: 6rpx;
            width: 56rpx;
            height: auto;
          }
        }
      }
    }
  }
}
</style>
